import React, { useState } from "react";
import "../mp-design-tokens/components-styles/Switch.css";

const Switch = ({ item, text, disabled = false, checked = false }) => {
  const [isChecked, setIsChecked] = useState(checked);

  const switchClassName = isChecked ? "switch-true" : "switch-false";
  console.log(switchClassName);

  const handleSwitchChange = () => {
    setIsChecked(!isChecked);
  };

  return (
    <div className={`switch ${switchClassName}`}>
      <label htmlFor={item}>{text}</label>
      <div className="switch-bg">
        <input
          id={item}
          name={item}
          type="checkbox"
          disabled={disabled}
          checked={isChecked}
          onChange={handleSwitchChange}
          className="switch-hidden"
        />
        <span className="switch-handle"></span>
      </div>
    </div>
  );
};

export default Switch;
